const div = document.createElement('div');
div.innerHTML = `
    <div id="up0">
    <div class="left" >
        <img src="../img/水下生物网2.0.png"/>
    </div>
    <div class="right" style="display:flex; justify-content: flex-end; align-items: center;">
        <div class="search-box">
            <input type="text" placeholder="输入水下生物名称..."/>
            <button><i class="fa fa-search" aria-hidden="true"></i></button>
        </div>
        <div>
            <div class="login" id="login" style="position: static; width: 150px; text-align:center;">
                <a href="../login.html" style="margin-left: 0; color: #056f93">登录 / 注册</a>
            </div>
            <div class="loggedin" id="loggedin" style="display: none; width: 150px; text-align:center;">
                <span id="welcomeMessage" style="padding: 10px 15px;  line-height: 28px;"></span>
                <button onclick="logout()" style="background-color: #3797ec; color: white;margin-bottom: 5px; border: none;border-radius: 5px; padding: 10px 15px; cursor: pointer;vertical-align: middle;">退出</button>
            </div>
        </div>
    </div>
</div>

<div id='up1'>
    <ul class="navbar">
        <li id="nav1"><a href="../fishing.html">钓鱼</a></li>
        <li id="nav2"><a href="../article.html">资讯</a></li>
        <li id="nav3"><a href="../message-board.html">留言</a></li>
        <li id="nav4"><a href="../main.html">首页</a></li>
    </ul>
</div>
`
document.body.insertAdjacentElement('afterbegin', div);

// 用于切换登录状态
if (sessionStorage.getItem('name') && sessionStorage.getItem('id')) {
    document.getElementById('loggedin').style.display = 'block';
    document.getElementById('welcomeMessage').innerHTML = `<div class="avatar-container"><span class="avatar-content">${sessionStorage.getItem('name')[sessionStorage.getItem('name').length - 1]}</span></div>`;
    document.getElementById('login').style.display = 'none';
} else {
    document.getElementById('login').style.display = 'block';
}

// 退出功能示例
function logout() {
    sessionStorage.removeItem('name');
    sessionStorage.removeItem('id');
    document.getElementById('login').style.display = 'block';
    document.getElementById('loggedin').style.display = 'none';
}


// 消息提示框
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "../css/message.css";
document.head.appendChild(link);
const message = {
    background: '', // 背景颜色
    outside: '', // 外框元素
    inside: '', // 信息显示元素
    insideSetTime: '', // 信息移除setTime
    body: '', // body元素
    time: 0, // 显示时间
    run(type = 'success', msg = "success", time = 2000) {
        // 显示时间
        this.time = time;

        // 背景色
        this.background = this.backgroundCheck(type)
        // this.background = '#67C23A'

        // body
        this.body = document.body;

        // 时间戳id
        let id = 'inside_box' + Date.now();

        // 检查是否存在外框
        let outsideShow = document.getElementById('message_box_show');
        if (outsideShow != null) {
            // 文字显示区域
            this.inside = document.createElement('div');
            this.inside.setAttribute('class', 'message_box_inside cc-display')
            this.inside.setAttribute('id', id)
            this.inside.style.backgroundColor = this.background;
            this.inside.innerHTML = `<span>${msg}</span>`
            outsideShow.appendChild(this.inside);
        } else {
            // 最外框
            this.outside = document.createElement('div');
            this.outside.setAttribute('id', 'message_box_outside')
            this.outside.setAttribute('class', 'cc-display')

            // 中间区域
            outsideShow = document.createElement('div');
            outsideShow.setAttribute('id', 'message_box_show');

            // 文字显示区域
            this.inside = document.createElement('div');
            this.inside.setAttribute('class', 'message_box_inside cc-display')
            this.inside.setAttribute('id', id)
            this.inside.style.backgroundColor = this.background;
            this.inside.innerHTML = `<span>${msg}</span>`

            // 显示
            outsideShow.appendChild(this.inside);
            this.outside.appendChild(outsideShow);
            this.body.appendChild(this.outside);
        }

        // 添加监听
        this[id] = this.insideTime(this.inside, outsideShow);
        this.boxShowTime(this.inside, id, outsideShow);
    },

    // 信息显示区域展示
    boxShowTime(inside, insideSetTime, outsideShow) {
        inside.addEventListener('mouseleave', () => {
            // 离开后设置隐藏时间
            this[insideSetTime] = this.insideTime(inside, outsideShow);
        })
        inside.addEventListener('mouseenter', () => {
            // 清除隐藏设置
            clearTimeout(this[insideSetTime]);
        })
    },

    // 信息区显示
    insideTime(inside, outsideShow) {
        let insideSetTime = setTimeout(() => {
            outsideShow.removeChild(inside);
        }, this.time);
        return insideSetTime;
    },

    // 判定显示颜色
    backgroundCheck(type) {
        if (type === 'success') return '#67C23A';
        if (type === 'error') return '#F56C6C';
        if (type === 'warning') return '#E6A23C';
        // if (type === 'info') return '#909399';
        return '#909399'; // 默认级别
    },

    success(msg) {
        this.run('success', msg)
    },

    warn(msg) {
        this.run('warning', msg)
    },

    error(msg) {
        this.run('error', msg)
    }

}